//加载模板内变量
@import "../common/variables_back_custom";
@import "../common/variables_back_default";
@import "../common/variables";
//加载通用混合
@import "../common/mixins";

.sidebar {
	color: #fff;
	@include box-shadow($default-shadow);
}

.sidebar-top {
	width: 100%;
	height: $sidebar-top-height;
	background-color: $background-color-color;
	z-index: $sidebar-top-zindex;
	@include box-shadow($second-shadow);

	.sidebar-top-fixed & {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
}

.sidebar-left-toggler {
	padding: 4px 12px;

	&:hover,
	&:focus,
	&:active {

	}
}

.sidebar-bottom {
	height: $sidebar-bottom-height;
	z-index: $sidebar-bottom-zindex;

	.sidebar-bottom-fixed & {
		position: fixed;
	}
}

.sidebar-left {
	width: $sidebar-left-width;
	height: 100%;
	background-color: $background-color-lightest;
	z-index: $sidebar-left-zindex;
	transition: all linear .2s;
	@include opacity(1);

	.inner-container > .nav {
		> li {
			> .nav-link {
				padding: 11px 20px 11px 25px;
			}

			&.active {
				background: $background-color-lighter;

				> a {
					font-weight: 600;
				}
			}
		}

		&:not(.nav-second-level) > li {
			&.active {
				border-left: 3px solid $brand-primary;
			}
		}
	}

	.nav-header {
		padding: 25px;
		background-color: $brand-primary;
	}

	.nav-link {
		display: block;
		color: $font-color-base !important;

		&:hover {
			font-weight: 600;
		}
	}

	.sidebar-left-mini & {
		.profile-info {
			display: none;
		}

		.nav-link {
			font-size: 16px;
			span {
				display: none;
			}
		}

		.has-arrow:after {
			width: 0;
			height: 0;
			border: none;
		}

		li {
			&.active {
				.nav-second-level {
					display: none;
				}
			}
		}
	}

	.sidebar-left-fixed & {
		top: $sidebar-top-height;
		position: fixed;
		height: calc(100% - #{$sidebar-top-height});

		@include media-breakpoint-up('sm') {
			left: 0;
		}

		@include media-breakpoint-up('md') {
			width: $sidebar-left-width;
			left: 0;
		}

		@at-root .sidebar-left-mini#{&} {
			width: $sidebar-left-mini-width;
			left: -$sidebar-left-mini-width;

			@include media-breakpoint-up('sm') {
				width: $sidebar-left-mini-width;
				left: 0;

				.profile-info {
					display: none;
				}

				.nav-header {
					padding: 15px;
				}
			}
		}
	}
}

.profile-element {
	> img {
		cursor: pointer;
		max-width: 100px;
	}

	> a {
		color: $font-color-lighter;
	}

	.sidebar-left-mini & {
		display: none;
	}
}

.logo-element {
	display: none;
	.sidebar-left-mini & {
		display: block;
	}
}

.sidebar-right {
	width: $sidebar-right-width;
	height: 100%;
	background-color: $background-color-lightest;
	top: $sidebar-top-height;
	right: 0;
	z-index: $sidebar-right-zindex;

	.sidebar-right-fixed & {
		position: fixed;
	}
}

body, html {
	height: 100%;
}

body {
	&.full-height-layout {
		.wrapper {
			height: 100%;
		}
	}
}

.wrapper {
	width: 100%;
	overflow: hidden;
}

.main-content-wrapper {
	height: calc(100% - #{$sidebar-top-height + $sidebar-bottom-height});
	position: relative !important;
	margin-left: 0;
	margin-top: $sidebar-top-height;
	@include transition(all 0.4s);

	@include media-breakpoint-up('sm') {
		.sidebar-left-mini.sidebar-left-fixed & {
			margin-left: $sidebar-left-mini-width;
		}
	}

	@include media-breakpoint-up('md') {
		margin-left: $sidebar-left-width;

		.sidebar-left-mini.sidebar-left-fixed & {
			margin-left: $sidebar-left-mini-width;
		}
	}
}

.page-header {
	padding: $page-header-padding;
	background-color: $background-color-lightest;
	@include box-shadow($page-header-shadow);
}


//////////////////////////////////////////////////////////////////////
// tab-list
//////////////////////////////////////////////////////////////////////
.tab-list-wrapper {
	background: #fff;
	height: $tabs-nav-height + 1px;
	border-bottom: 1px solid $default-border-color;
	position: relative;
	line-height: $tabs-nav-height;
	@include transition(all 0.4s);
}

.tab-list-container {
	height: $tabs-nav-height;
	flex-grow: 100;
	position: relative;
}

.tab-list {
	padding-left: 0;
	margin-bottom: 0;
	position: absolute;
	width: 20000px;

	.tab {
		color: #999;
		display: block;
		position: relative;
		float: left;
		height: $tabs-nav-height;
		border-right: solid 1px #eee;
		padding: 0 15px;

		@include transition(all .15s linear);
		&:hover {
			color: #777;
			background: #f2f2f2;
			cursor: pointer;
		}
		&:hover, &:focus {
			text-decoration: none;
		}
		&.active {
			background: rgba($brand-primary, 0.5);
			color: $font-color-base;
		}

		i {
			position: absolute;
			right: .2em;
			top: .2em;
		}
	}
}

.tab-panel-container {
	width: 100%;
	height: calc(100% - #{$tabs-nav-height});
	overflow: hidden;

	@include media-breakpoint-down('xs') {
		height: 100%;
	}
}

.tab-action {
	border-width: 0;
	border-left: 1px;
	border-style: solid;
	border-color: $default-border-color;
	width: 40px;
	height: $tabs-nav-height;
	text-align: center;
	color: #888 !important;
	background: #fff;
	z-index: 2;
	@include transition(all .3s ease-out 0s);

	&.dropdown-toggle {
		width: auto;
	}

	&:hover {
		color: #666 !important;
		background: #f2f2f2;
		cursor: pointer;
	}

	&:active {
		background: #ddd;
	}

}

.tab-action-left {
	border-right-width: 1px;
	line-height: $tabs-nav-height;
}

.metismenu {
	ul {
		padding-left: 25px;
	}
}